<%@ page language="java" contentType="text/html; charset=UTF-8"
		 pageEncoding="UTF-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Insert title here</title>
	<style type="text/css">
		td{
			text-align: center;
			width: 125px;
		}
		.c2{
			margin-left: 40px;
			margin-bottom: 40px;
		}
	</style>


</head>
<body>
<br/>
<center>
	<form action="queryStu.do" method="get">
		姓名<input name="sname" value="${student.sname}"/>
		性别
		<select name="gender">
			<option value="-1">请选择</option>
			<option value="男" <c:if test="${student.gender == '男'}">selected="selected"</c:if> >男</option>
			<option value="女"  <c:if test="${student.gender == '女'}">selected="selected"</c:if> >女</option>
		</select>
		<input type="submit" value="查询"/>
	</form>
	<br/>
</center><br/>
<input type="button" id="batchDel" value="批量删除" style="margin-left: 150px"/>
<br/>
<table border="1px" width="80%" align="center" cellpadding="0"
	   cellspacing="0">
	<tr>
		<th><input type="checkbox" id="checkAll" />全选/全不选</th>
		<th>学号</th>
		<th>姓名</th>
		<th>性别</th>
		<th>生日</th>
		<th>爱好</th>
		<th>头像</th>
		<th>操作</th>
	</tr>
	<!-- 遍历学生的信息 -->
	<c:forEach items="${page.pageList}" var="stu">
		<tr>
			<td><input type="checkbox" class="ch" value="${stu.sid}" /></td>
			<td>${stu.sid}</td>
			<td>${stu.sname}</td>
			<td>${stu.gender}</td>
			<td>${stu.sbir}</td>
			<td>${stu.hobby}</td>
			<td>
				<img src="http://localhost:8080/img/${stu.photo}" alt="找不到了" width="80px" height="60px">			</td>
			<td>
				<a href="updateById.do?sid=${stu.sid}">修改</a>
			</td>
		</tr>
	</c:forEach>

</table>
<script type="text/javascript">
		var check = document.getElementById("checkAll");
		check.onclick =function (){
			//获取复选框checked的属性值
			var ch=check.checked;
			console.log(ch);
			// 获取所有要选中的复选框
			var chek = document.getElementsByClassName("ch");
			//遍历数组中的复选框
			for (var i = 0; i <chek.length; i++) {
				//将属性值赋值给其他复选框
				chek[i].checked = ch;
			}
		}

		// 批量删除
		//获取删除的按钮对象
		var batch = document.getElementById("batchDel");
		// 点击按钮触发点击事件
		batch.onclick=function(){
			// 删除提示
			var fig = confirm("你确定要删除吗？？")
			if (fig){
				var chek = document.getElementsByClassName("ch");
				var ids = "";
				for (var i = 0; i <chek.length; i++) {
					//获取复选框 checked的属性值
					var choose =  chek[i].checked ;
					// 如果返回true 表示被选中
					if (choose){
						var va = chek[i].value;
						//console.log(choose,":",va);
						ids+=","+va ;            // ,1,2,3,4
					}
				}

				//  对收集到的学生编号进行处理
				var id = ids.substring(1)
				console.log(id);
				// 判断有被选中的学生
				if (id != ""){
					// 将要删除的学生编号提交到 后台删除
					location.href = "deleteStudentById.do?ids=" + id;
				}else{
					alert("请至少选择一个要删除的学生~~~~~~")
				}
			}
		}

</script>
<br/><br/>
<center>
	<a href="queryStu.do?currentPage=1&sname=${student.sname}&gender=${student.gender}" class="c2">首页</a>
	<a href="queryStu.do?currentPage=${page.prePage}&sname=${student.sname}&gender=${student.gender}" class="c2">上一页</a>
	<a href="queryStu.do?currentPage=${page.nextPage}&sname=${student.sname}&gender=${student.gender}" class="c2">下一页</a>
	<a href="queryStu.do?currentPage=${page.countPage}&sname=${student.sname}&gender=${student.gender}" class="c2">尾页</a>
	<span class="c2">当前页码<input size="4" value="${page.currentPage}"/></span>
	<span class="c2">总记录数<input size="4" value="${page.countNum}"/></span>
</center>
</body>
</html>